<route lang="yaml">
meta:
  whiteList: false
  title: 工作台
  constant: true
  layout: false
</route>

<script lang="ts" setup>
import 'gridstack/dist/gridstack.min.css'
import { onMounted, reactive } from 'vue'
import useUserStore from '@g/store/modules/user'
import { useRouter } from 'vue-router'
import { ikDate, ikStore } from 'iking-utils'
import axios from 'axios'
import useLayoutStore from '@g/store/modules/layout'
import Calendar from './calendar/calendar.vue'
import WeekCalendar from './calendar/WeekCalendar.vue'
import { applicationApi as appApi, scheduleApi, taskApi } from '@/MainApp/apis/workbench'
import { copyValue } from '@/global/utils'

const userStore = useUserStore()
const router = useRouter()

const layouteStore = useLayoutStore()

const headerHeight = computed(() => layouteStore.headerHeight)

const { msgError, msgSuccess, msgBoxWarnAsync } = useMessage()

const photoUrl = new URL('./photo.svg', import.meta.url).href

/** 头 begin */
const headerState = reactive({
  contentVisible: true
})
const headerMethods = {
  close: () => {
    headerState.contentVisible = false
  }
}
/** 头 end */

/** 我的应用 begin */
const appState = reactive<any>({
  data: [],
  quickData: [
    { name: '消息中心', code: 'message', indexPath: 'news-center/personal-news' },
    { name: '审批中心', code: 'approve', indexPath: 'iking-flow/approve-list' }
  ]
})
const appMethods = {
  search: async () => {
    const res: any = await appApi.select({
      page: 1,
      rows: 20,
      tenantCode: ikStore.local.getItem(ELocal.TENANT)?.code,
      enabled: true
    })
    if (res.success) {
      // for(const app of res.data){
      //   app.icon = photoUrl
      // }
      appState.data = res.data
    }
  },
  to: async (app: any) => {
    const url = `?domain=APPLICATION&code=${app.code}${router.resolve({ path: app.indexPath }).href}`
    window.open(url)
  },
  toTenantManage: async () => {
    const url = `?domain=TENANT_MANAGEMENT${router.resolve({ path: '' }).href}`
    window.open(url)
  },
  addQuick: () => {

  }
}
onMounted(() => {
  appMethods.search()
})
const quickOperations = ref<any>([
  { icon: photoUrl, title: '任务管理' },
  { icon: photoUrl, title: '视频会议' },
  { icon: photoUrl, title: '日程管理' },
  { icon: photoUrl, title: '审批管理' },
  { icon: photoUrl, title: '客户管理' },
  { icon: photoUrl, title: '请假申请' },
  { icon: photoUrl, title: '加班申请' },
  { icon: photoUrl, title: '报销申请' },
  { icon: photoUrl, title: '工作回报' },
  { icon: photoUrl, title: '付款申请' }
])
/** 我的应用 end */

/** 我的待办 begin */
const taskState = reactive<any>({
  data: [],
  total: 0,
  pageSize: 5,
  currentPage: 1
})

const taskMethods = {
  search: async () => {
    const params = {
      page: taskState.currentPage,
      rows: taskState.pageSize,
      userId: userStore.userInfo?.id
    }

    const res = await taskApi.select(params)
    if (!res.success) {
      console.error(res.msg)
      return
    }
    taskState.total = res.total
    taskState.data = res.data

    // taskState.data = [
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' },
    //   // { title: '类目市场宣传物料设计', status: '进行中', priority: '紧急', startTime: '2023-12-23 22:31' }
    // ]
  },
  handleCurrentChange: () => {
    taskMethods.search()
  },
  toApprove: (row: any) => {
    if (!row.redirect) {
      //
      return
    }
    const params = row.redirect.split('//')[1].split('/')

    const tabMap: any = {
      submit: 'IApproved'
      // IApproved // 我审批的
      // ISubmitted // 我提交的
    }

    const url = `?domain=APPLICATION&code=approve${router.resolve({ path: '/iking-flow/approve-list', query: { id: params[1], tabId: tabMap[params[0]], tabInnerId: 'Wait' } }).href}`
    window.open(url)
  }
}
onMounted(() => {
  taskMethods.search()
})
/** 我的待办 end */

/** 个人信息 begin */
const infoState = reactive({
  data: userStore.userInfo
})
/** 个人信息 end */

/** 我的日程 begin */
const scheduleFormRef = ref<any>(null)
const calendarRef = ref<any>(null)
const weekCalendarRef = ref<any>(null)
const scheduleMethods: any = {
  handleDel: (row: any) => {
    msgBoxWarnAsync('确认删除', '确定删除吗？', async () => {
      const { success, msg } = await scheduleApi.del(row.id)
      if (success) {
        scheduleMethods.search(scheduleState.currentDate)

        if (scheduleState.expanded) {
          //
          scheduleMethods.searchCount(calendarRef.value.getDates())
        }
        else {
          //
          scheduleMethods.searchCount(weekCalendarRef.value.getDates())
        }

        msgSuccess(msg)
      }
      else {
        msgError(msg)
      }
    })
  },
  toggleExpanded: () => {
    scheduleState.expanded = !scheduleState.expanded
    if (scheduleState.expanded) {
      // 展开，查当前月
      const dates = calendarRef.value.getDates()
      scheduleMethods.searchCount(dates)
    }
  },
  toToday: () => {
    calendarRef.value?.toToday()
  },
  getCurrentYM: () => {
    return ikDate.toYM(scheduleState.currentDate, 'YYYY年MM月')
  },
  add: () => {
    scheduleState.operation = 'add'
    scheduleState.title = '新增日程'
    scheduleState.editable = true
    copyValue(scheduleState.form, scheduleMethods.createDefaultForm())
    scheduleState.form.startDate = scheduleState.currentDate
    scheduleState.form.endDate = scheduleState.currentDate
    scheduleState.editVisible = true
    setTimeout(() => {
      scheduleFormRef.value?.clearValidate()
    })
  },
  update: (param: any) => {
    scheduleState.operation = 'update'
    scheduleState.title = '日程信息'
    scheduleState.editable = true
    scheduleState.editData = param
    copyValue(scheduleState.form, scheduleMethods.convertResData(param))
    scheduleState.editVisible = true
  },
  edit: () => {
    scheduleState.editable = true
    scheduleState.title = '编辑日程'
  },
  cancelEdit: () => {
    scheduleState.editable = false
    scheduleState.title = '日程信息'
  },

  closeEdit: () => {
    scheduleState.editVisible = false
  },
  createDefaultForm: () => ({
    title: '',
    allDay: true,
    type: 1,
    startDate: '',
    endDate: '',
    startTime: '',
    endTime: '',
    location: '',
    remark: ''
  }),
  handleClickCalendarDate: (date: any) => {
    scheduleMethods.handleClickDate(date)
    scheduleMethods.toggleExpanded()
    weekCalendarRef.value?.setPrimaryDate(date)
  },
  handleClickDate: (date: any) => {
    console.log('handleClickDate ', date)
    scheduleState.currentDate = date
    scheduleMethods.search(date)
  },
  handleToToday: () => {
    scheduleMethods.search(new Date())
  },
  handleChangeMonth: () => {},
  search: async (date: string | Date) => {
    const dateStr = ikDate.toDate(date)
    const params = {
      page: 1,
      rows: 99,
      startTime: `${dateStr} 00:00:00`,
      endTime: `${dateStr} 23:59:59`
    }
    const res = await scheduleApi.select(params)
    if (!res.success) {
      console.error(res.msg)
      return
    }
    scheduleState.data = res.data
  },

  searchCount: async (dates: any) => {
    const startTime = `${dates[0].date} 00:00:00`
    const endTime = `${dates[dates.length - 1].date} 00:00:00`
    const res = await scheduleApi.countDate({ startTime, endTime })
    if (!res.success) {
      //
      console.error(res.msg)
    }

    const dotDates = []
    for (const key of Object.keys(res.data)) {
      //
      dotDates.push(key)
    }
    scheduleState.dotDates = dotDates
  },
  getTimestamp: (item: any) => {
    if (!item.allDay)
      return `${item.estimateStartTime.substring(11, 16)}-${item.estimateEndTime.substring(11, 16)}`

    else
      return `${item.estimateStartTime.substring(0, 10)}（全天）`
  },
  more: () => {
    const url = `?domain=APPLICATION&code=schedule${router.resolve('/schedule').href}`
    window.open(url)
  },

  convertReqData: (param: any): any => {
    const result: any = {
      id: param.id ?? null,
      title: param.title,
      remark: param.extendedProps?.remark,
      estimateStartTime: param.start,
      estimateEndTime: param.end,
      allDay: param.allDay
    }

    if (result.allDay) {
      result.estimateStartTime = `${result.estimateStartTime} 00:00:00`
      result.estimateEndTime = `${result.estimateEndTime} 00:00:00`
    }
    return result
  },
  convertResData: (param: any): any => {
    const { title, remark, allDay } = param
    const result = {
      title,
      remark,
      allDay,
      startDate: ikDate.toDate(param.estimateStartTime),
      endDate: ikDate.toDate(param.estimateStartTime),
      startTime: param.estimateStartTime,
      endTime: param.estimateEndTime
    }
    return result
  },

  submit: async () => {
    try {
      await scheduleFormRef.value?.validate()
    }
    catch (error: any) {
      return
    }

    // if (!scheduleState.form.title) {
    //   msgError('标题不能为空')
    //   return
    // }
    // if (!scheduleState.form.allDay) {
    //   if (!scheduleState.form.startTime || !scheduleState.form.endTime) {
    //     msgError('时间不能为空')
    //     return
    //   }
    // }

    const param: any = {
      id: undefined,
      title: scheduleState.form.title,
      allDay: scheduleState.form.allDay,
      start: '',
      end: '',
      extendedProps: {
        ...scheduleState.form
      }

    }
    // 设置开始~结束时间
    if (param.allDay) {
      param.start = ikDate.toDate(scheduleState.form.startDate)
      param.end = ikDate.toDate(scheduleState.form.endDate)
    }
    else {
    // 因为时间选择器默认的日期是当前日期，不是选中的日期，所以需要将进行纠偏处理
      const date = ikDate.toDate(scheduleState.form.startDate)
      const startTime = ikDate.toDateTime(scheduleState.form.startTime).substring(10)
      const endTime = ikDate.toDateTime(scheduleState.form.endTime).substring(10)

      param.start = `${date}${startTime}`
      param.end = `${date}${endTime}`
      param.extendedProps.startTime = param.start
      param.extendedProps.endTime = param.end
    }

    if (scheduleState.operation === 'update') {
      //
      param.id = scheduleState.editData.id
    }

    const finalParms = scheduleMethods.convertReqData(param)

    let res = null
    if (scheduleState.operation === 'update') {
      //
      res = await scheduleApi.update(finalParms)
    }
    else {
      //
      res = await scheduleApi.add(finalParms)
    }

    if (!res.success) {
      msgError(res.msg)
      return
    }

    msgSuccess(res.msg)
    scheduleMethods.search(scheduleState.currentDate)
    scheduleMethods.closeEdit()
  }
}

const scheduleState = reactive<any>({
  dotDates: [],
  // 当前日期
  currentDate: ikDate.toDate(new Date()),
  form: scheduleMethods.createDefaultForm(),
  data: [],
  hoverItem: null,
  // 已展开
  scheduleState: false,

  // 新增、修改 begin
  editable: false,
  title: '新增日程',
  operation: 'add',
  editVisible: false,
  editData: null
  // 新增、修改 end
})

onMounted(() => {
  // scheduleState.currentDate = ikDate.toDate(new Date())
  scheduleMethods.search(scheduleState.currentDate)
})
/** 我的日程 end */

/** 通知公告 begin */
const noticeState = reactive<any>({
  data: []
})
const noticeMethods = {
  search: () => {
    noticeState.data = [
      { id: '1', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '2', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '3', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '4', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '5', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '6', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '7', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' },
      { id: '8', title: '控制台提交工单入口变更通知', status: '', time: '2023-10-22 11:20:37' }
    ]
  }
}

onMounted(() => {
  noticeMethods.search()
})
/** 通知公告 end */

onMounted(() => {

})

const testInterceptors = async () => {
  console.log('testInterceptors ...')
  const res = await axios.post('/application/list/all')
  console.log('testInterceptors res ', res)
}
</script>

<template>
  <div class="workbench">
    <div v-if="headerState.contentVisible" class="workbench-header">
      <div class="workbench-header-content">
        <div class="workbench-header-content-left">
          <span class="title">
            您好，{{ infoState.data.name }}
          </span>
          <span class="secondary">
            欢迎回来!
          </span>
        </div>
        <div class="workbench-header-content-right">
          <IkSvgIcon name="iksvg_guanbi-yemianbiaoqian" :size="24" @click="headerMethods.close" />
        </div>
      </div>
    </div>

    <div class="workbench-main gl-padding" :class="[headerState.contentVisible ? 'margin-top-large' : '']">
      <div class="config-page">
        <div class="content">
          <div style="display: flex;" class="content-item">
            <el-card class="quick-operations">
              <div class="quick-operations-header">
                <span class="icon-title">我的应用</span>
                <span>
                  <el-button
                    link
                    disabled
                    class="operation-button"
                  >更多
                    <IkSvgIcon name="iksvg_shouqi-copy" :start-margin="false" />
                  </el-button>
                </span>
              </div>
              <div class="quick-operations-content">
                <el-row v-if="appState.data.length" class="width-100">
                  <el-col
                    v-for="item in appState.data"
                    :key="item.id"
                    :span="6"

                    class="quick-operations-content-col"
                    @click="appMethods.to(item)"
                  >
                    <div class="quick-operations-content-item">
                      <div class="quick-operations-content-item-content">
                        <div class="application-name">
                          {{ item.name }}
                        </div>
                        <div class="application-remark">
                          <span>
                            {{ item.remark }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-empty v-else :image-size="80" style="margin: 0 auto" />
              </div>

              <div class="quick-access">
                <div class="quick-operations-header">
                  <span class="icon-title">快捷入口</span>
                </div>

                <el-row class="width-100 margin-top-large">
                  <el-col
                    v-for="item in appState.quickData"
                    :key="item.id"
                    :span="6"
                    style="padding: 0 8px;"
                    @click="appMethods.to(item)"
                  >
                    <div class="quick-operations-content-item">
                      <div class="quick-operations-content-item-content">
                        <div class="application-name">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col
                    :span="6"
                    style="padding: 0 8px;"
                    @click="appMethods.addQuick"
                  >
                    <div class="quick-operations-content-item">
                      <div class="quick-operations-content-item-content width-100">
                        <div class="application-name width-100">
                          <el-button link class="width-100">
                            <IkSvgIcon name="iksvg_xinzeng" />
                            添加快捷入口
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>

          <el-card class="content-item todo margin-top-large">
            <span class="icon-title">我的待办</span>
            <div class="margin-top-large">
              <el-table :data="taskState.data">
                <el-table-column label="业务名称" prop="businessName" width="150px" />
                <!-- <template #default="{ row }">
                    <el-button link type="primary" @click="taskMethods.toApprove(row)">{{ row.summary }}</el-button>
                  </template> -->
                <el-table-column label="摘要" prop="summary" />
                <el-table-column label="业务状态" prop="processStatus" width="100px">
                  <template #default="{ row }">
                    <IkStatu
                      :type="row.status === '待审批' ? 'warning' : 'info'"
                      :title="row.status"
                      :circle="false"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" prop="status" width="100px">
                  <template #default="{ row }">
                    <IkSvgIcon show-bg name="iksvg_bianji" @click="taskMethods.toApprove(row)" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="创建时间" prop="createTime" /> -->
                <!-- <el-table-column label="创建人" prop="createTime" /> -->
              </el-table>
              <el-pagination
                v-model="taskState.currentPage"
                style="margin-top: 8px"
                :total="taskState.total"
                :page-size="5"
                layout="slot, ->, prev, pager, next,  jumper"
                @current-change="taskState.handleCurrentChange"
              >
                <template #default>
                  <span class="total">
                    共<span class="num">{{ taskState.total }}</span>
                    项数据
                  </span>
                </template>
              </el-pagination>
            </div>
          </el-card>
        </div>
        <div class="right">
          <el-card class="user-info">
            <div class="user-info-content">
              <div class="user-info-image">
                <!-- <el-image :src="photoUrl" /> -->
                <IkSideText
                  :avatar="infoState.data.avatar"
                  :size="68"
                  shape="circle"
                  :name="infoState.data.name"
                />
              </div>
              <div class="margin-left-large">
                <div class="user-info-name">{{ infoState.data.name }}</div>
                <div class="user-info-dept">
                  <!-- <span>产品经理</span> -->
                  <span>{{ infoState.data.posts[0]?.name ?? '--' }}</span>
                  <el-divider direction="vertical" />
                  <!-- <span>技术研发部</span> -->
                  <span>{{ infoState.data.departments[0]?.name ?? '--' }}</span>
                </div>
              </div>
            </div>
          </el-card>
          <el-card class="schedule">
            <div class="schedule-header">
              <span class="icon-title">我的日程</span>
              <span>
                <el-button
                  link
                  class="operation-button"
                  type="info"
                  @click="scheduleMethods.more"
                >更多
                  <IkSvgIcon name="iksvg_shouqi-copy" :start-margin="false" />
                </el-button>
              </span>
            </div>
            <Calendar
              v-show="scheduleState.expanded"
              ref="calendarRef"
              class="margin-top-large"
              :is-day="true"
              :dot-dates="scheduleState.dotDates"
              @click-date="scheduleMethods.handleClickCalendarDate($event.days)"
              @change-dates="scheduleMethods.searchCount"
              @to-today="scheduleMethods.handleToToday"
            />
            <div v-show="!scheduleState.expanded" class="unexpaned-calendar">
              <WeekCalendar
                ref="weekCalendarRef"
                :dot-dates="scheduleState.dotDates"
                @change="scheduleMethods.handleClickDate"
                @change-dates="scheduleMethods.searchCount"
              />
            </div>

            <el-divider>
              <IkSvgIcon v-if="!scheduleState.expanded" name="iksvg_shouqi" @click="scheduleMethods.toggleExpanded" />
              <IkSvgIcon v-else name="iksvg_zhankai" @click="scheduleMethods.toggleExpanded" />
            </el-divider>
            <div class="schedule-content">
              <div class="schedule-content-amount">
                <span>共{{ scheduleState.data?.length ?? 0 }}个日程</span>
              </div>
              <div class="schedule-content-list" @mouseleave="scheduleState.hoverItem = null">
                <!-- <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in scheduleState.data"
                    :key="index"
                    :timestamp="scheduleMethods.getTimestamp(item)"
                    placement="top"
                  >
                    {{ item.title }}
                  </el-timeline-item>
                </el-timeline> -->

                <div
                  v-for="item in scheduleState.data"
                  :key="item.id"
                  class="schedule-content-list-item"
                  @mouseover="scheduleState.hoverItem = item"
                >
                  <div class="schedule-item-left">
                    <IkSideText
                      avatar="iksvg_rili"
                      avatar-type="icon"
                      :icon-type="scheduleState.hoverItem?.id === item.id ? 'primary' : 'info'"
                      show-icon-bg
                      :name="item.title"
                      :text="scheduleMethods.getTimestamp(item)"
                      :sub-text="item.title.length > 20 ? `${item.title.substring(0, 20)}...` : item.title"
                    />
                  </div>
                  <div class="schedule-item-right">
                    <el-button :type="scheduleState.hoverItem?.id === item.id ? 'primary' : 'info'" link @click="scheduleMethods.update(item)">详情</el-button>
                  </div>
                </div>

                <el-button
                  text
                  bg
                  class="schedule-add-button"
                  @click="scheduleMethods.add"
                >
                  <IkSvgIcon name="iksvg_xinzeng" />
                  添加日程
                </el-button>
              </div>
            </div>

            <el-dialog
              v-model="scheduleState.editVisible"
              append-to-body
              align-center
              width="650px"
              @close="scheduleMethods.closeEdit"
            >
              <template #header>
                <div>
                  <span style="font-size: 18px">{{ scheduleState.title }}</span>
                  <!-- <span v-if="scheduleState.operation === 'update'">
                    <IkSvgIcon
                      v-if="!scheduleState.editable"
                      style="margin-left: 4px"
                      name="iksvg_xiugai"
                      @click="scheduleMethods.edit"
                    />
                    <IkSvgIcon
                      v-else
                      style="margin-left: 4px"
                      name="iksvg_qiehuan-daohang"
                      @click="scheduleMethods.cancelEdit"
                    />
                  </span> -->
                </div>
              </template>
              <el-form
                ref="scheduleFormRef"
                :model="scheduleState.form"
                :disabled="!scheduleState.editable"
                label-position="top"
              >
                <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入标题' }]">
                  <el-input
                    v-model="scheduleState.form.title"
                    placeholder="请输入标题"

                    clearable
                  />
                </el-form-item>
                <el-form-item label="时间" :rules="[{ required: true, message: '请选择时间' }]">
                  <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <el-date-picker
                      v-model="scheduleState.form.startDate"
                      disabled
                      type="date"
                      placeholder="开始日期"
                    />
                    <div v-if="!scheduleState.form.allDay" class="flex items-center margin-left-normal">
                      <el-form-item :label-width="0" :rules="[{ required: true, message: '请选择时间' }]" prop="startTime">
                        <el-time-picker
                          v-model="scheduleState.form.startTime"
                          type="datetime"
                          placeholder="开始时间"

                          format="HH:mm"
                        />
                      </el-form-item>

                      <span class="margin-x-normal">至</span>
                      <el-form-item :rules="[{ required: true, message: '请选择时间' }]" prop="endTime">
                        <el-time-picker
                          v-model="scheduleState.form.endTime"
                          type="datetime"
                          placeholder="结束时间"
                          format="HH:mm"
                        />
                      </el-form-item>
                    </div>
                    <template v-else>
                      <span class="margin-x-normal">至</span>
                      <el-date-picker
                        v-model="scheduleState.form.endDate"
                        disabled
                        type="date"
                        placeholder="结束日期"
                      />
                    </template>
                    <el-checkbox v-model="scheduleState.form.allDay" label="全天" style="margin-left: 2%;" />
                  </div>
                </el-form-item>
                <el-form-item label="描述">
                  <el-input
                    v-model="scheduleState.form.remark"
                    type="textarea"
                    placeholder="描述"

                    clearable
                  />
                </el-form-item>
              </el-form>
              <template #footer>
                <el-button text bg @click="scheduleMethods.closeEdit">取消</el-button>
                <el-button text bg @click="scheduleMethods.handleDel(scheduleState.editData)">删除</el-button>
                <el-button type="primary" @click="scheduleMethods.submit">确定</el-button>
              </template>
            </el-dialog>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .workbench{
    height:calc(100vh - calc(v-bind(headerHeight))) ;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-sizing: border-box;

    .workbench-header{
      background-image: url("./assets/bg-header.png");
      height: 86px;
      padding: 10px 32px;
      // opacity: 0.62;
      // background-image: linear-gradient(-89deg, #ecf1f800 65%, #d4deef9c 90%);
      .workbench-header-content{
        margin: 0 auto;
        height: 66px;
        // opacity: 0.2;
        // background-image: linear-gradient(90deg, rgba(255,255,255,0.1));
        // background-image: linear-gradient(90deg, #FFFFFF 37%, #FFFFFF 89%);
        border-radius: 6px;
        display: flex;
        padding: 0 28px;
        align-items: center;
        justify-content: space-between;
        // filter: blur(6px);
        .workbench-header-content-left{
          .title{
            font-size: 26px;
          }

          .secondary{
            font-size: 16px;
            font-weight: 400px;
            color: var(--color-font-secondary);
          }
        }
      }
    }

    .workbench-main{
      flex-grow: 1;
      flex-shrink: 1;
      overflow-y: auto;

      &.margin-top-large{
        margin-top: var(--space-large) !important;
      }

      display: flex;
      flex-direction: column;
    }
  }

.config-page{
    flex-grow: 1;
    display: flex;
    overflow-y: auto;
    box-sizing: border-box;

    .content{
      box-sizing: border-box;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      flex-shrink: 1;

      .content-item + .content-item{
        margin-top: 16px;
      }

    }

    .right{
      margin-left: 16px;
      width: 509px;
      min-width: 482px;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
  }

  .icon-title{
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    display: flex;
    align-items: center;
  }

  /** 个人信息 */
.user-info{
  height: 120px;
  flex-shrink: 0;

  :deep(.el-avatar){
    --el-avatar-bg-color: var(--el-color-primary);

    font-size: 18px;
  }

  .user-info-content{
    width: 100%;
    height: 100%;
    display: flex;
    padding-left: var(--space-normal);

    .user-info-image{
      display: flex;
      justify-content: center;
      border-radius: 50%;
      height: 68px;
      width: 68px;
    }

    .user-info-name{
      text-align: center;
      font-size: 20px;
      // color: #fff;
      margin-top: var(--space-small);
    }

    .user-info-dept{
      margin-top: var(--space-normal);
      color: var(--color-font-secondary);
    }

  }

}

  /** 我的应用 */
  .quick-operations{
    flex-grow: 1;
    // min-height: 380px;

    .quick-operations-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .quick-operations-content{
      margin-top: var(--space-large);
      display: flex;
      flex-wrap: wrap;

      .quick-operations-content-item{
        height: 100px;
        cursor: pointer;
        display: flex;
        margin: 0 auto;
        align-items: center;
        background-image: url("./assets/bg-app.png");
        background-size: cover;
        border-radius: 8px;
        padding: 26px 28px;

        .quick-operations-content-item-content{
          .application-name{
            font-size: 18px;
          }

          .application-remark{
            font-size: 14px;
            color: var(--color-font-secondary);
          }
        }

      }

      .quick-operations-content-col{
        padding: 1px 8px;

        &:hover{
          padding: 0 7px;
        }
      }

    }

  }
    // 快捷入口
    .quick-access{
    margin-top: calc(var(--space-normal) * 3);

    .quick-operations-content-item{
        height: 50px;
        cursor: pointer;
        display: flex;
        margin: 0 auto;
        align-items: center;
        background-color: var(--color-bg-page);
        border-radius: 8px;
        padding: 26px 28px;

        .quick-operations-content-item-content{
          .application-name{
            font-size: 16px;
          }

          .application-remark{
            font-size: 14px;
            color: var(--color-font-secondary);
          }
        }

      }
  }

  /** 我的待办 */
  .todo{
    flex-grow: 1;
    overflow-x: hidden;
  }

  /** 日程 */
  .schedule{
    margin-top: var(--space-large);
    flex-grow: 1;

    .schedule-header{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .operation{
        font-size: 16px;
      }
    }

    .schedule-info-row{
      margin-top: calc(var(--space-normal) * 3);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: var(--color-font-secondary);

      :deep(.el-button){
        font-size: 16px;
        // color: var(--color-font-secondary);
      }
    }

    .unexpaned-calendar{
      margin-top: calc(var(--space-normal) * 3);
    }

    .schedule-content{
      padding-left: 16px;

      .schedule-content-amount{
        font-size: 18px;
        color: var(--color-font-secondary);
        font-weight: 400;
      }

      .schedule-content-list{
        margin-top: var(--space-large);

        .schedule-content-list-item{
          height: 89px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: solid 1px var(--color-divider);
          padding-right: var(--space-large);

          &:hover{
            background-color: var(--color-bg-input);
          }
        }

        .schedule-add-button{
          margin-top: var(--space-normal);
          height: 50px;
          width: 100%;
        }

        :deep(.schedule-content-list-item .side-text p:first-child){
          font-size: 20px;
          font-weight: 500;
        }
      }
    }

  }

  :deep(.workbench-main){
    .el-card__header{
      border-bottom: none;

    }

    .operation-button{
      font-size: 16px;

      .ik-iksvg_shouqi-copy{
        font-size: 20px !important;
        padding: 0 !important;
      }
    }

   .el-card{
      overflow-y: auto;
    }

  }
</style>
